<template>
  <div>
    <!-- 局部过滤器 -->
    <p>商品的价格是{{ price | priceFormat(1) }}</p>
    <p>商品的价格是{{ price | priceFormat(2) }}</p>
<!-- 
  过滤器的使用是在插值语法中,在数据后添加一个管道符 '|',后边书写过滤器
  如果过滤器不需要传参,则直接书写过滤器名称
   如果过滤器需要传参,则直接传参
   插值语法中如果有过滤器,则插值语法展示的其实是过滤器函数的返回值
 -->
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      price: 100,
    };
  },
  filters: {
     /* 
      局部注册过滤器通过filters配置项定义
        - 过滤器的第一个参数是被过滤的数据
        - 过滤器第二个及以后的参数是 在上边元素中调用过滤器时传入的参数
    */
    priceFormat( data,num) {
      return '￥'+ data.toFixed(num)
      /* toFixed区小数点后几位,参数是几就会有几位小数*/
    },
  },
};
</script>

<style>
</style>